<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>

<link href="/css/layui.css" rel="stylesheet"></html>

<body>
<!--<div class="col-auto">
    <ul id="imgList" class="titleTab" th:if="${scenicpictureArr != false}" th:value="${farmRoom.roomPhotos}" th:each="scenicpic:${scenicpictureArr}">
        <li th:attr="data-id=${scenicpic}">
            <img style="width:60px;height:60px;" th:src="${scenicpic}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="btn btn-warning btn-sm ' + s_remove_h + '" href="#" title="删除图片"><i class="fa fa-remove"></i></span>
        </li>
    </ul>
</div>-->
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div th:if="${scenicpictureArr != false}" th:each="scenicpic:${scenicpictureArr}"><img style="width: 100%;height: 100%" th:src="${scenicpic}" /></div>
    </div>
</div>
<div class="form-group" style="margin-top: 20px">
    <label class="col-sm-3 control-label">菜品名称：&nbsp;&nbsp;<p style="float: right" th:text="${farmDish.dishName}"></p></label>
    <label class="col-sm-3 control-label" style="margin-left: 20%">菜品分类：&nbsp;&nbsp;<p style="float: right" th:text="${farmDish.type}"></p></label>
</div>
<div class="form-group" style="margin-top: 100px">
    <label class="col-sm-3 control-label">菜品价格:<p style="float: right" th:text="${farmDish.rackPrice}"></p></label>
    <label class="col-sm-3 control-label" style="margin-left: 20%">优惠价格:<p style="float: right" th:text="${farmDish.specialPrice}"></p></label>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<div th:include="include::footer"></div>
<script src="/js/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            // ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,interval: 5000
        });
    });
</script>
</body>
</html>